<template>
  <div>
    <!-- 公告模块 -->
    <Announcement v-if="showAnnouncement" class="dashboard-module" />
    <!-- 拖拽区 -->
    <draggable v-model="modules" group="dashboard-modules" animation="250" itemKey="key">
      <template #item="{element}">
        <component :is="element.type" v-bind="element.props" class="dashboard-module">
          <template v-if="element.slot" #default>
            <component :is="element.slot" />
          </template>
        </component>
      </template>
    </draggable>
  </div>
</template>
<script setup lang="ts">
import { ref, markRaw } from 'vue'
import draggable from 'vuedraggable'
import Announcement from '@/components/Announcement.vue'
import StatCard from '@/components/admin/StatCard.vue'
import ChartCard from '@/components/admin/ChartCard.vue'
import DoctorRankList from '@/components/admin/DoctorRankList.vue'
import StatCardGroup from '@/components/admin/StatCardGroup.vue'
import QuickActionGroup from '@/components/admin/QuickActionGroup.vue'
import ChartsGroup from '@/components/admin/ChartsGroup.vue'

const showAnnouncement = ref(true)

// 统计卡片区
const statCards = [
  { icon: 'fas fa-calendar-check', title: '今日预约量', value: '128', trend: '12.5% 较昨日', trendType: 'up' },
  { icon: 'fas fa-user-md', title: '本月接诊量', value: '2,458', trend: '8.3% 较上月', trendType: 'up' },
  { icon: 'fas fa-percentage', title: '预约成功率', value: '92.6%', trend: '3.2% 较上月', trendType: 'up' }
]

// 快捷入口区
const quickActions = [
  { icon: 'fas fa-calendar-plus', label: '快速排班', action: () => alert('快速排班') },
  { icon: 'fas fa-file-export', label: '导出报表', action: () => alert('导出报表') }
]

// 图表区
const doctorList = [
  { name: '张华主任', dept: '内科', avatar: '张', stats: { visits: 186, satisfaction: '98%' } },
  { name: '李明主任', dept: '外科', avatar: '李', stats: { visits: 172, satisfaction: '97%' } }
]

// 拖拽模块配置
const modules = ref([
  {
    key: 'stat',
    type: markRaw(StatCardGroup),
    props: { statCards }
  },
  {
    key: 'quick',
    type: markRaw(QuickActionGroup),
    props: { quickActions }
  },
  {
    key: 'charts',
    type: markRaw(ChartsGroup),
    props: { doctorList }
  }
])
const components = { StatCardGroup, QuickActionGroup, ChartsGroup }
</script>
<style scoped>
.dashboard-module {
  margin-bottom: 28px;
}
.dashboard-stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}
.dashboard-quick-row {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.quick-action-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(90deg, #42a5f5 0%, #1976d2 100%);
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 14px 28px;
  font-size: 1.08rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(25, 118, 210, 0.07);
  transition: all 0.2s;
}
.quick-action-btn:hover {
  background: linear-gradient(90deg, #1976d2 0%, #42a5f5 100%);
  color: #fff;
  transform: translateY(-2px) scale(1.03);
}
.dashboard-charts-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: stretch;
}
.dashboard-charts-row .chart-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: stretch;
}
@media (max-width: 900px) {
  .dashboard-charts-row {
    grid-template-columns: 1fr;
  }
}
</style> 